<template>

  <div class="cardManager">
    <div class="search">
      <el-form ref="form" :model="searchParam" label-width="80px" inline>
        <el-form-item label="名称">
          <el-input v-model="searchParam.name"></el-input>
        </el-form-item>
        <el-form-item label="卡片类型">
          <el-select v-model="searchParam.types" placeholder="请选择" multiple>
            <el-option
                v-for="(item,index) in cardTypeList"
                :key="index"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="创建时间">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择日期" v-model="searchParam.startTime" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择时间" v-model="searchParam.endTime" style="width: 100%; " format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
        </el-form-item>
        <div class="sub">
          <el-button type="success" @click="chageData(true)">新增</el-button>
          <el-button type="primary" @click="getCardInfo">查询</el-button>
          <el-button>取消</el-button>
        </div>

      </el-form>
    </div>
    <div class="dataTable">
      <el-table :data="cardList"  border>
        <el-table-column type="index" label="序号" width="120"/>
        <el-table-column  label="名字" width="120">
          <template slot-scope="scope">

            <el-button type="text" @click="toContent(scope.row.id,scope.row.name)">{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="类型"  width="120" >
          <template slot-scope="scope">
            <el-select v-model="scope.row.type" placeholder="请选择" >
              <el-option
                  v-for="(item,index) in cardTypeList"
                  :key="index" disabled
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="是否可用"  width="120">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.isView"
                active-color="#13ce66"
                disabled
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createAt" label="时间"  width="200"/>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="editCardInfo(scope.row)">编辑</el-button>
            <el-button type="danger" v-text="scope.row.isView?'禁用':'启用'" @click="chageStatus(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=searchParam.cardPage.currentPage
            :page-sizes="[10, 50, 100, 200]"
            :page-size=searchParam.cardPage.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="cardListSize">
        </el-pagination>
      </div>
    </div>

    <div>
      <el-dialog
          title="添加和修改"
          :visible.sync="dialogVisible"
          width="50%"
          center>
      <AddCard :card="dictObj"  :card-type="cardTypeList" @chageData="chageData"></AddCard>
      </el-dialog>
    </div>

  </div>

</template>

<script>

import AddCard from "@c/common/AddDict";
import {Message} from "element-ui";
export default {
  components: {AddCard},
  data(){
    return{
      searchParam:{
        cardPage:{
          currentPage:1,
          pageSize:10
        }
      },
      cardListSize:null,
      cardTypeList:[],
      cardList:[],
      dialogVisible:false,
      dictObj:{}
    }
  },
  methods:{
    getCardInfo (){
      this.postRequestJson("/api/tg/card/getCardInfo",this.searchParam).then(resp=>{
        this.cardList= resp.data.data
        this.cardListSize = resp.data.size
      })
    },
    getDictTypes() {

      this.postRequestJson("/api/tg/portal/getCardType",{}).then(resp=>{
        this.cardTypeList = resp.data.data
      })
    },
    editCardInfo(data) {
      this.dialogVisible = true
      this.dictObj = data
    },
    chageData(flag) {
      this.dictObj ={}
      this.dictObj.isView = true
      this.dialogVisible = flag;
      if (!flag) {
        this.getCardInfo()
      }
    },
    chageStatus(data) {
      this.$confirm('是否改变状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data.isView = !data.isView
        this.postRequestJson("/api/tg/card/addOrEditCardInfo",data).then(resp=>{
          if (resp.data.code === '0') {
            Message.success("操作成功")
          }
        })
      })
    },
    toContent(id,name){
      this.$router.push({
        path:'/portal/content',
        query:{id:id,name:name}})
    },
    handleSizeChange(val) {
      this.searchParam.cardPage.pageSize = val
      this.getCardInfo()
    },

    handleCurrentChange(val){
      this.searchParam.cardPage.currentPage = val
      this.getCardInfo()
    },

  },
  created() {
    this.getCardInfo()
    this.getDictTypes()
  },
  comments(){
    AddCard
  }
}
</script>
<style>
  .cardManager{
    margin-left: 50px;
  }
  .cardManager .search{
    padding: 30px;
    margin-top: 100px;
    border: #d4caca 1px solid;
  }
  .cardManager .search .sub{
    margin-top: 60px;
  }
  .cardManager .dataTable{
    margin-top: 60px;
  }

</style>